{% load static %}
<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=pie-legend
-->
<div id="container-{{ data.text }}" style="width: 100%; min-height: 300px"></div>
<script type="text/javascript">
  var dom = document.getElementById('container-{{ data.text }}');
  var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
  });
  var app = {};

  var option;

  var data =  {{ data | safe}};
  option = {
      title: {
          text: '球队{{ data.text }}统计',
          subtext: '{{ data.season }}赛季',
          left: 'center'
      },
      tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
          type: 'scroll',
          orient: 'horizontal',
          bottom: 0,
          data: data.legendData
      },
      series: [
          {
              name: '球队',
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
              data: data.seriesData,
              emphasis: {
                  itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          }
      ]
  };
  if (option && typeof option === 'object') {
      myChart.setOption(option);
  }

  window.addEventListener('resize', myChart.resize);
</script>
